<!-- 需求详情 -->
<template>
  <PageMain>
    <pageBack />
    <div class="brw w-full pl-0px pr-0px">
      <div class="pl-24px pr-24px pt-12px pb-0">
        <div class="use-title-icon">需求详情</div>
        <descriptions :data="descData" />
      </div>
    </div>
    <div class="brw w-full pa-24px">
      <div class="use-title-icon">用户承接记录</div>
      <ProTable ref="tableRef" :columns="columns" :data="tableData" :border="true" :pagination="false"></ProTable>
    </div>
  </PageMain>
</template>
<script setup>
import api from "@/api";
const route = useRoute();
const tableRef = ref();

// 表格配置项
const columns = [
  { label: "承接人", prop: "acceptUserName", align: "left" },
  { label: "承接时间", prop: "createTime", align: "left" },
  { label: "手机号码", prop: "contactPhone", align: "left" },
  { label: "姓名", prop: "contactName", align: "left" },
  { label: "承接说明", prop: "acceptDesc", align: "left" },
];

const tableData = ref();

const descData = ref();

const getDetail = () => {
  api
    .get(
      `/demand/${route.query.id}`,
      {},
      {
        loading: true,
      }
    )
    .then((res) => {
      descData.value = [
        { label: "服务类型", value: res.serviceCategoryNameList.join(",") },
        { label: "城市", value: res.cityNameList.join(","), span: 3 },
        { label: "标题", value: res.title, span: 4 },
        { label: "详细描述", value: res.detailDesc, span: 4 },
        { label: "发布时间", value: res.createTime },
        { label: "截止时间", value: res.cutoffDate },
        { label: "联系方式", value: res.contactPhone },
        { label: "邮箱", value: res.contactEmail },
      ];
      tableData.value = res.recordList;
    });
};
onMounted(() => {
  getDetail();
});
</script>
<style scoped lang="scss">
.page-header {
  border-bottom: 1px solid var(--use-color-line);
  padding-left: 16px;

  .el-icon {
    margin-right: 10px;
  }

  span {
    cursor: pointer;
    height: 40px;
    display: flex;
    align-items: center;
  }
}

::v-deep(.table-main) {
  padding: 0 !important;
  margin-top: 0 !important;
}
</style>
